<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">控制图层层叠关系 Set zIndex</h1>
      </el-affix>
      <div id="map" class="map-x" ref="mapBox"></div>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="4">
          <span class="tit">设置方块所在图层的 Z-index</span>
          <el-input-number v-model="squareZIndex" :min="1" :max="10" />
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="4">
          <span class="tit">设置三角形所在图层的 Z-index</span>
          <el-input-number v-model="triangleZIndex" :min="1" :max="10" />
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="4">
          <span class="tit">设置星形所在图层的 Z-index</span>
          <el-input-number v-model="starZIndex" :min="1" :max="10" />
        </el-col>
      </el-row>
      <div class="codestyle"><Code /></div>
      <dl>
        <dt>控制图层层叠关系</dt>
        <dd>可以设置多个图层，然后获取到图层后，用setZIndex来设置当前图层。</dd>
      </dl>
    </div>
  </el-scrollbar>
</template>
<script>
import { toRefs, reactive, ref, onMounted, watch } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import Point from 'ol/geom/Point'
import { Style, RegularShape, Fill, Stroke } from 'ol/style'
import XYZ from 'ol/source/XYZ'
import Tile from 'ol/layer/Tile'
export default {
  setup () {
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      squareZIndex: 1,
      triangleZIndex: 2,
      starZIndex: 3,
      styles: {
        square: new Style({
          image: new RegularShape({
            fill: new Fill({ color: 'blue' }),
            stroke: new Stroke({ color: 'black', width: 1 }),
            points: 4,
            radius: 80,
            angle: Math.PI / 4
          })
        }),
        triangle: new Style({
          image: new RegularShape({
            fill: new Fill({ color: 'red' }),
            stroke: new Stroke({ color: 'black', width: 1 }),
            points: 3,
            radius: 80,
            rotation: Math.PI / 4,
            angle: 0
          })
        }),
        star: new Style({
          image: new RegularShape({
            fill: new Fill({ color: 'green' }),
            stroke: new Stroke({ color: 'black', width: 1 }),
            points: 5,
            radius: 80,
            radius2: 4,
            angle: 0
          })
        })
      },
      layer0: null,
      layer1: null,
      layer2: null,
      layer3: null
    })

    watch([() => state.squareZIndex, () => state.triangleZIndex, () => state.starZIndex], (newVal) => {
      // 方块所在图层的 Z-index
      state.layer1.setZIndex(parseInt(newVal[0], 10) || 0)
      // 三角形所在图层的 Z-index
      state.layer2.setZIndex(parseInt(newVal[1], 10) || 0)
      // 星形所在图层的 Z-index
      state.layer0.setZIndex(parseInt(newVal[2], 10) || 0)
    })

    const init = () => {
      state.layer0 = createLayer([116.41400, 39.91500], state.styles.star, state.starZIndex)
      state.layer1 = createLayer([116.41400, 39.91500], state.styles.square, state.squareZIndex)
      state.layer2 = createLayer([116.41400, 39.91500], state.styles.triangle, state.triangleZIndex)
      state.layer3 = new Tile({
        source: new XYZ({
          url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        })
      })

      // 如果zindex相等，那么越靠后的元素就在越上层
      const layers = [state.layer0, state.layer1, state.layer2, state.layer3]

      state.map = new Map({
        target: state.mapBox,
        layers,
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [116.41400, 39.91500],
          zoom: 7 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

    const createLayer = (coordinates, style, zIndex) => {
      const feature = new Feature(new Point(coordinates))
      feature.setStyle(style)

      const source = new SourceVector({
        features: [feature]
      })

      const vectorLayer = new LayerVector({
        source: source
      })

      vectorLayer.setZIndex(zIndex)

      return vectorLayer
    }

    onMounted(() => {
      init()
    })

    return {
      init,
      createLayer,
      ...toRefs(state)
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
.el-row {
  margin-top: 20px;
}
.tit {
  display: block;
  margin-bottom: 10px;
}
</style>
